<template>
  <div class="app-container">
    <div class="detail">
      <div class="title">
        <div v-if="status=='1'">待支付</div>
        <div v-if="status=='2'">待发货</div>
        <div v-if="status=='3'">待完善物流</div>
        <div v-if="status=='4'">待收货</div>
        <div v-if="status=='5'">已完成</div>
        <div v-if="status=='6'">已完全拆分</div>
        <div v-if="status=='10'">已取消</div>
      </div>
      <el-card class="box-card" style="margin:20px 0" v-loading="loading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" prop="date" label="用户头像">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.himg" alt style="max-width:250px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.himg"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nickname" label="姓名"></el-table-column>
          <el-table-column align="center" prop="mobile" label="手机"></el-table-column>
          <el-table-column align="center" prop="add_time" label="下单时间"></el-table-column>
          <el-table-column align="center" prop="order_sn" label="订单号"></el-table-column>
          <el-table-column align="center" label="是否积分支付">
            <template slot-scope="scope">
              <div v-if="scope.row.is_integral==1">是</div>
              <div v-if="scope.row.is_integral==0">否</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="box-card">
        <el-table :data="goodsData" style="width: 100%">
          <el-table-column align="center" prop="date" label="商品图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.img" alt style="max-width:250px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.img"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="goods_name" label="商品名称"></el-table-column>
          <el-table-column align="center" prop="spec" label="商品规格"></el-table-column>
          <el-table-column align="center" prop="price" label="单价"></el-table-column>
          <el-table-column align="center" prop="num" label="购买数量"></el-table-column>
          <el-table-column align="center" prop="subtotal" label="小计"></el-table-column>
          <el-table-column align="center" prop="" label="快递公司">
            <template slot-scope="scope">
              <div v-if="scope.row.is_xn==1">-</div>
              <div v-else>{{scope.row.express}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="物流单号">
            <template slot-scope="scope">
              <div v-if="scope.row.is_xn==1">-</div>
              <div v-else>{{scope.row.express_sn}}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getOrderDetail } from "@/api/commodity";
import { parseTime } from "@/utils/index";
export default {
  name: "CommodityOrderDetail",
  data() {
    return {
      loading: false,
      tableData: [],
      goodsData: [],
      status: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    async getDetail() {
      this.tableData = [];
      this.loading = true;
      const res = await getOrderDetail({ id: this.id });
      console.log(res);
      this.status = res.data.status;
      this.tableData.push(res.data);
      this.tableData.forEach(item => {
        item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
      });
      this.goodsData = res.data.goods_info;
      this.loading = false;
    }
  }
};
</script>

<style lang='scss' scoped>
.detail {
  padding: 50px;
  .title {
    font-size: 30px;
    color: #c7c5c5;
  }
}
</style>